<template>
  <el-dialog
    title="发布新服务"
    :close-on-click-modal="false"
    :visible.sync="addservice"
  >
    <el-form :model="form">
      <el-row>
        <el-col :span="22"
          ><el-form-item label="服务名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" /> </el-form-item
        ></el-col>
      </el-row>

      <!-- 分类/热卖 -->
      <el-row>
        <el-col :span="11">
          <el-form-item label="设置分类" :label-width="formLabelWidth">
            <el-select
              v-model="form.sc_id"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(i, index) in type"
                :key="index"
                :label="i.name"
                :value="i.sc_id"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="11">
          <el-form-item label="技师类型" :label-width="formLabelWidth">
            <el-select
              v-model="form.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(type, i) in doctype"
                :key="i"
                :label="type.name"
                :value="type.type_id"
              />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <!-- 比例/价格 -->
      <el-row>
        <el-col :span="11">
          <el-form-item label="分成比例" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入内容"
              type="number"
              v-model="form.doc_rate"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11"
          ><el-form-item label="推荐价格" :label-width="formLabelWidth">
            <el-input v-model="form.r_price" type="number" placeholder="人民币"
              ><template slot="append">￥</template>
            </el-input>
          </el-form-item></el-col
        >
      </el-row>
      <!-- 服务简介 -->
      <el-row>
        <el-col :span="22"
          ><el-form-item label="服务简介" :label-width="formLabelWidth">
            <el-input
              v-model="form.intro"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            /> </el-form-item
        ></el-col>
      </el-row>

      <!-- 服务说明 -->
      <el-row>
        <el-col :span="22"
          ><el-form-item label="服务说明" :label-width="formLabelWidth">
            <el-input
              v-model="form.explain"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            /> </el-form-item
        ></el-col>
      </el-row>

      <!-- 注意事项 -->
      <el-row>
        <el-col :span="22"
          ><el-form-item label="注意事项" :label-width="formLabelWidth">
            <el-input
              v-model="form.attention"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            /> </el-form-item
        ></el-col>
      </el-row>

      <!-- 上传图片 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="上传封面" :label-width="formLabelWidth">
            <input
              id="upload"
              type="file"
              name="img"
              style="display: none"
              @change="getimg"
            />
            <div class="el-upload el-upload--picture-card" @click="ck">
              <div>
                <i slot="default" class="el-icon-plus" />
              </div>
            </div>
            <div
              v-for="(src, x) in imgsrc"
              :key="x"
              class="el-upload--picture-card"
            >
              <span class="close" @click="close(x)">
                <i class="el-icon-delete" />
              </span>
              <el-image
                :src="src.showimg"
                fit="cover"
                style="width: 100%; height: 100%"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addservice = false">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from "axios";
import { getclass, addservice } from "@/api/service/service.js";
import { doctortype } from "@/api/user/user.js";
export default {
  name:"serviceadd",
  data() {
    var $domain = process.env.VUE_APP_BASE_API;
    return {
      domain: $domain,
      listinfo: [],
      addservice: false,
      form: {
        name: "",
        intro: "",
        attention: "",
        sc_id: "",
        explain: "",
        doc_rate: "",
        r_price: "",
        type: "",
      },
      imgsrc: [],
      uploadsrc: [],
      doctype: [],
      type: [],
      formLabelWidth: '120px'
    };
  },
  created(){
    this.requesttype()
    this.requestdoctorclass()
  },
  methods: {
    add() {
      var that = this;
      that.imgsrc = [];
      that.addservice = true;
      for (var i in that.form) {
        that.form[i] = "";
      }
    },
    ok() {
      var that = this;
      if (that.imgsrc != false) {
        that.requestadd();
      } else {
        that.$message({
          type: "info",
          message: "封面不能为空!",
        });
      }
    },
    requestadd() {
      var that = this;
      var f = that.form;
      var data = {
        name: f.name,
        sc_id: f.sc_id,
        type: f.type,
        intro: f.intro,
        img: that.imgsrc[0].uploadimg,
        attention: f.attention,
        explain: f.explain,
        o_id: null,
        doc_rate: f.doc_rate,
        r_price: f.r_price,
        check_status:1
      };
      console.log(data);
      addservice(data).then((res) => {
        console.log(res);
        that.$emit('then')
        that.addservice = false;
      });
    },
    requesttype() {
      var that = this,
        data = {
          field: "sc_id",
          op: ">",
          value: "0",
        };
      getclass(data).then((res) => {
        console.log("type", res);
        that.type = res;
      });
    },
    requestdoctorclass() {
      var that = this;
      var data = {
        field: "type_id",
        op: ">",
        value: "0",
      };
      doctortype(data).then((res) => {
        console.log(res);
        that.doctype = res;
      });
    },
    ck() {
      if (this.imgsrc.length === 0) {
        document.getElementById("upload").click();
      } else {
        this.$message({
          type: "error",
          message: "封面只可以上传一张",
        });
      }
    },
    getimg(e) {
      var str = [],
        that = this,
        config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
      e.target.files.forEach((file) => {
        var obj = {
          showimg: window.URL.createObjectURL(file),
          uploadimg: "",
        };
        // str.push()
        const formData = new FormData();
        formData.append("uploadfile_ant", file);
        axios
          .post(that.domain + "index/index/upload", formData, config)
          .then(function (res) {
            obj.uploadimg = res.data;
            that.imgsrc.push(obj);
            that.$message({
              type: "success",
              message: "上传成功!",
            });
          })
          .catch(function (error) {
            console.log(error);
            that.$message({
              type: "info",
              message: "上传错误!",
            });
          });
      });
    },
    close(id) {
      this.imgsrc.splice(id, 1);
    },
  },
};
</script>

<style>
  .el-form--inline .el-form-item__content {
    display: block;
  }
  .el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
  }
  .close {
    opacity: 0;
    transition: opacity 0.3s;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
  }
  .el-upload--picture-card:hover .close {
    opacity: 1;
  }
  .close > i {
    margin: auto;
  }
</style>